<template>
  <h2>今年：{{ age }}岁</h2>
  <h3>十年后：{{ newAge }}岁</h3>
  十年后：<input type="text" v-model="newAge" />
  <button @click="age++">点击今年大一岁</button>
</template>

<script>
import { computed, ref } from 'vue'
/* 
  学习目标：掌握使用computed函数定义计算属性
  应用场景：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
*/
export default {
  name: 'App',
  setup() {
    const age = ref(18)

    // computed 函数调用后，返回的是一个响应式 ref 数据
    // 🔔 默认情况下 computed 的结果是只读的（Vue2和Vue3同理），如果想要高级写法 get 和 set 配合使用
    const newAge = computed({
      get() {
        return age.value + 10
      },
      set(val) {
        // 💥 val 其实只是个临时值，基于临时值 val 修改 age.value，从而得到最新的 newAge
        age.value = val - 10
      },
    })

    return { age, newAge }
  },
  // Vue2 的写法回顾
  // computed: {
  //   // newAge 是一个变量名，接收函数内部返回的结果
  //   newAge: {
  //     get() {
  //       return this.age + 10
  //     },
  //     set(val) {
  //       this.age = val - 10
  //     },
  //   },
  // },
}
</script>